<template>
  <view>
    <view>
      <nui-guide :guideList="guideList" @curIndex="curIndex"></nui-guide>
      <!--<nui-step :step="3"></nui-step>-->
      <nui-step :step="stepType"></nui-step>
      <!-- <iframe :src="iframePath" class="iframe" frameborder="0" width="100%" height="100%"></iframe> -->
      <view class="download-box">
        <image :src="qrCodeUrl" class="ewm" />
        <text class="tips">长按上方二维码</text>
      </view>
      <view class="faxin-guide" v-if="isShowGuide"></view>
      <view class="faxin-guide_1" v-if="isShowGuide1"></view>
      <u-button type="primary" shape="square" :ripple="true" size="medium" class="custom-btn" @click="toPath"
        >下一步</u-button
      >
    </view>
  </view>
</template>

<script>
import { mapGetters } from "vuex";
import * as consts from "@/utils/constant.js";
export default {
  data() {
    return {
      iframePath: "",
      qrCodeUrl: "",
      downloadImg: "",
      guideList: [
        {
          el: ".ewm", // 需要高亮的元素，这里最好唯一
          tips: "① 手指放在这，长按这里", // 提示文字
          next: "下一步", // 下一步按钮显示文字
          style: {
            // 高亮样式
            borderRadius: "12px",
            margin: "-5px 0 0 -5px",
            width: "200px",
            height: "200px",
          },
          tipStyle: {
            // tips样式
            left: "10px",
            top: "220px",
            atop: "217px",
          },
        },
        {
          el: ".faxin-guide", // 需要高亮的元素，这里最好唯一
          tips: "② 点击这里,进入小程序完成信息填写", // 提示文字
          next: "下一步", // 下一步按钮显示文字
          style: {
            // 高亮样式
            borderRadius: "12px",
            margin: "-5px 0 0 -5px",
            width: "200px",
            height: "60px",
            left: "25%",
            top: "78vh",
          },
          tipStyle: {
            // tips样式
            left: "0px",
            top: "70px",
            atop: "67px",
          },
        },
        {
          el: ".faxin-guide_1", // 需要高亮的元素，这里最好唯一
          tips: "③ 进入小程序完成信息填写后，点击这里", // 提示文字
          next: "下一步", // 下一步按钮显示文字
          style: {
            // 高亮样式
            borderRadius: "12px",
            margin: "-5px 0 0 -5px",
            width: "22%",
            height: "60px",
            left: "78%",
            top: "20px",
          },
          tipStyle: {
            // tips样式
            left: "-200px",
          },
        },
        {
          el: ".custom-btn", // 需要高亮的元素，这里最好唯一
          tips: "④ 点击这里", // 提示文字
          next: "下一步", // 下一步按钮显示文字
          style: {
            // 高亮样式
            borderRadius: "5px",
            margin: "-5px 0 0 -5px",
            width: "140px",
            height: "45px",
          },
          tipStyle: {
            // tips样式
            left: "50px",
            top: "-73px",
            atop: "-20px",
          },
        },
      ],
      isShowGuide: false,
      isShowGuide1: false,
    };
  },
  mounted() {
    this.getExminePath();
  },
  computed: {
    ...mapGetters(["deptId","stepType"]),
  },
  methods: {
    async toPath() {
      await this.$api.riders.otherStatus({ otherStatus: 80 });
      this.$u.route("pages/download/index");
    },
    async getExminePath() {
      let { data } = await this.$api.dept.queryQrCode({ deptId: this.deptId });
      this.qrCodeUrl = `${consts.API_BASE_URL}/xsdcrm-wechat-api/common/wechat/loadImage?imagesName=${data.qrCodeUrl}`;
    },
    curIndex(num) {
      if (num === 2) {
        this.isShowGuide1 = true;
      } else {
        this.isShowGuide1 = false;
      }
      if (num === 1) {
        this.isShowGuide = true;
      } else {
        this.isShowGuide = false;
      }
    },
  },
};
</script>

<style lang="scss" scoped>
uni-page-body,
uni-view {
  height: 100%;
}
.iframe {
  height: 85vh;
}
.download-box {
  position: absolute;
  left: 50%;
  top: 40%;
  transform: translate(-50%, -50%);
  width: 200px;
  height: 200px;
  image {
    display: block;
    width: 100%;
    height: 100%;
  }
  .tips {
    display: block;
    width: 100%;
    text-align: center;
    color: #666;
    font-size: 12px;
    margin-top: 10px;
  }
}
.custom-btn {
  position: absolute;
  bottom: 10px;
  margin: 15px auto;
  left: 50%;
  transform: translateX(-50%);
}
.faxin-guide {
  width: 100%;
  height: 360px;
  position: absolute;
  bottom: 0px;
  left: 0;
  background: url("../../common/imgs/faxin.jpg") no-repeat;
  background-size: 100% 100%;
  z-index: 100;
}
.faxin-guide_1 {
  width: 100%;
  height: 80px;
  position: absolute;
  top: 0px;
  left: 0;
  background: url("../../common/imgs/faxin-1.jpg") no-repeat;
  background-size: 100% 100%;
  z-index: 100;
}
</style>
